<!-- 人员信息上报 -->
<template>
  <div class="box">
    <div class="left">
      <div :class="computer">
        <el-form
          :inline="true"
          size="mini"
          ref="searchForm"
          :model="searchForm"
          style="width:100%"
        >
          <el-form-item label-width="65px">
            <el-select
              size="mini"
              placeholder="请选择公司"
              filterable
              v-model="queryall.orgCode"
              clearable
            >
              <el-option
                v-for="(item, index) in companyData"
                :key="index"
                :clearable="false"
                :label="item.companyName"
                :value="item.companyCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label-width="65px">
            <el-date-picker
              v-model="queryall.workDate"
              type="date"
              clearable
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="findList"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <keep-alive>
        <el-table
          :data="tableData"
          stripe
          :height="curHeight"
          style="width: 100%"
        >
          <el-table-column prop="postName" label="岗位" width></el-table-column>
          <el-table-column prop="staffNo" label="工号" width></el-table-column>
          <el-table-column
            prop="staffName"
            label="姓名"
            width
          ></el-table-column>
          <el-table-column
            prop="staffTel"
            label="联系电话"
            width
          ></el-table-column>
          <!-- <el-table-column label="出勤" width>
                              <template slot-scope="scope">
                                  <el-checkbox  name="type" v-model="scope.row.remarks" :disabled="true"></el-checkbox>
                              </template>
                          </el-table-column> -->
        </el-table>
      </keep-alive>
      <!-- 分页区域 -->
      <div class="page">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="innerPage.totalNum"
          :current-page="innerPage.pageNum"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="innerPage.pageSize"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'equipment',
  components: { Treeselect },
  data() {
    return {
      activeTab: 'first',
      show: true,
      checked: true,
      activeName: 'first',
      sat: true,
      vall: [],
      curHeight: Number,
      senddate: [],
      withdrawdata: [],
      showOrHidden: false,
      sor: false,
      searchForm: {
        sldate: '',
        company: '',
      },
      searchFormtwo: {},
      value: [],
      companyData: [], //公司列表
      deptData: [],
      deptData2: [],
      scheduleData: [],
      formLabelWidth: '150px',
      tableData: [],
      //分页
      innerPage: {
        totalNum: 0,
        pageNum: 1,
        pageSize: 10,
      },
      queryall: {
        startpage: 1,
        pagesize: 10,
      },
      // 当前页码
      currentPage: 2,
      flag: true,
      nowData: {},
      compData: [],
    }
  },
  computed: {
    computer: function() {
      if (this.showOrHidden) {
        return 'top'
      } else {
        return 'top2'
      }
    },
    timeD() {
      var date = new Date()
      var s1 =
        date.getFullYear() +
        '-' +
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) +
        '-' +
        (date.getDate() + 1 < 10
          ? '0' + (date.getDate() + 1)
          : date.getDate() + 1)
      return s1
    },
  },
  beforeMount() {
    var h = document.documentElement.clientHeight || document.body.clientHeight
    this.curHeight = h - 260
  },
  created() {
    this.queryall.workDate = this.timeD
    this.have()
    this.getcomp()
    this.$http
      .get(`/${this.$ServiceName}/api/external/protected/listdepttree`)
      .then((res) => {
        this.vall = res.data.data
      })
    this.$http
      .get(
        `/${this.$ServiceName}/api/external/public/listdict?dicttype=SCHEDULE`,
        {}
      )
      .then((res) => {
        if (res.status == 200) {
          if (res.data.success) {
            this.scheduleData = res.data.data
          } else {
            this.$message.error(
              '查询班次列表信息失败错误代码：' + res.data.code + res.data.msg
            )
          }
        } else {
          this.$message.error('查询班次列表信息失败。状态码：' + res.status)
        }
      })
  },
  mounted() {},
  methods: {
    findList() {
      console.log(this.searchForm)
      this.have()
    },

    // 获取部门
    getcomp() {
      this.$http
        .get(`/${this.$ServiceName}/api/external/protected/listworkthirdcompany`)
        .then((res) => {
          if (res.data.code == '0000') {
            this.companyData = res.data.data
            let comp = []
            for (var i = 0; i < this.companyData.length; i++) {
              if (
                this.companyData[i].companyCode ==
                window.sessionStorage.getItem('companyCode')
              ) {
                comp.push(this.companyData[i])
              }
            }
            this.queryall.orgCode = comp[0].companyCode
          }
        })
    },

    // 获取公司列表
    have() {
      let depta = window.sessionStorage.getItem('deptCode')
      this.$http
        .get(
          `/${this.$ServiceName}/api/external/dreportstaff/${this.$version}/queryaudit`,
          {
            params: this.queryall,
          }
        )
        .then((res) => {
          if (res.data.code == '0000') {
            this.tableData = res.data.data.pages
            this.innerPage.totalNum = res.data.data.totalNum
          } else {
            this.$message.error('获取列表失败：' + res.data.msg)
          }
        })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    showOther() {
      if (this.showOrHidden) {
        this.showOrHidden = false
      } else this.showOrHidden = true
    },
    cancelFormone() {},
    submitForm() {},
    increase() {},
    // 每页显示的条数
    handleSizeChange(val) {
      this.queryall.pagesize = val
      this.have()
    },
    // 当前页
    handleCurrentChange(val) {
      this.queryall.startpage = val
      this.have()
    },

    // 对话框关闭
  },
}
</script>

<style lang="less" scoped>
.box /deep/ .el-tabs--border-card > .el-tabs__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}
.box /deep/ .el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
.box /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  border: 1px solid #e1e4eb;
  margin-top: -1px;
  color: #909399;
}
/deep/ .el-tabs__header {
  margin: 0;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 8px 16px;
  border-bottom: 1px solid gainsboro;
}
.pop /deep/ .el-form-item__content {
  margin-left: 20px !important;
}
/deep/ .el-form-item .vue-treeselect__control {
  height: 28px !important;
  line-height: 28px;
}
/deep/ .el-form-item .vue-treeselect__single-value,
.vue-treeselect__placeholder {
  line-height: 28px !important;
}
/deep/ .el-form-item .vue-treeselect__placeholder {
  line-height: 28px !important;
}
/deep/ .vue-treeselect {
  width: 150px;
}
/deep/.el-drawer__header {
  height: 41px;
  font-size: 16px;
  font-weight: 600;
}
.pop /deep/ .el-form-item {
  margin-bottom: 20px;
}
.pop /deep/ .el-form-item {
  margin-bottom: 20px;
}

.pop /deep/ .el-select {
  width: 72%;
}

.page /deep/ .el-pagination__editor.el-input {
  width: 50px;
}
.box .top {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0 20px;
  background: #f5f7fa;
  height: 80px;
  border: 1px solid #e1e4eb;
  border-left: none;
  border-right: none;
}
.box .top2 {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0 20px;
  background: #f5f7fa;
  height: 40px;
  border: 1px solid #e1e4eb;
  border-left: none;
  border-right: none;
}
.box /deep/ .el-form--inline .el-form-item {
  margin-right: 0;
}
.tableX .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc !important;
  border-radius: 30px !important;
}
.form-t {
  margin-bottom: 50px;
  padding: 0 1rem;
}
.form-t /deep/ .el-form-item__content {
  margin-left: 1rem !important;
  width: 60%;
}
.left /deep/ .el-input {
  width: 150px;
}
/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}
/deep/ .el-form-item {
  display: flex;
}
.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  padding-right: 1rem;
  height: 51px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.box {
  border-bottom: 1px solid #e1e4eb;
  border-top: none !important;
  border-radius: 4px 4px 0 0;
}

.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;
  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
/deep/ .el-table .cell {
  white-space: nowrap;
}
/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}
/deep/ .el-pagination {
  text-align: right;
}
/deep/ .el-table th > .cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 8px 16px;
  border-bottom: 1px solid gainsboro;
}
/deep/ .el-drawer__body {
  overflow-y: auto;
}
/deep/ .el-table .el-button:focus,
.el-button:hover {
  background-color: #fff;
  color: #338ce8;
  border: 1px solid #e1e4eb;
}
/deep/ .v-modal {
  z-index: 200 !important;
}
/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}
/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}
/deep/ .el-table th:nth-child(1) {
  border-left: none;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}
/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}
/deep/ .el-drawer__header {
  margin-bottom: 12px;
  padding: 8px 20px 0;
}

.el-button {
  margin-left: 0px !important;
}
/deep/ .el-tabs__item {
  background-color: #f5f7fa;
}
</style>
